<%- include("../header.ejs")-%>
<el-header style="font-size: 12px">
    <el-button type="primary" icon="el-icon-edit" @click="handleCreate">新加</el-button>
</el-header>
<el-main>
    <template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="ID" width="80"></el-table-column>

            <el-table-column label="时间" width="250">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.time }}</span>
                </template>
            </el-table-column>

            <el-table-column prop="content" label="内容" width="250" :show-overflow-tooltip="true"></el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" icon="el-icon-edit" type="success" @click="handleEdit(scope.row)">编辑
                    </el-button>
                    <el-button size="mini" icon="el-icon-delete" type="danger" @click="handleDelete(scope.row.id)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
</el-main>
<el-footer style="text-align: left; font-size: 12px">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="currentPage1" :page-size="20" layout="total, prev, pager, next" :total="<%= total %>">
    </el-pagination>
</el-footer>

<el-dialog title="" :visible.sync="dialogVisible" width="30%">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <el-form-item label="公告" prop="content">
            <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="form.content">
            </el-input>
        </el-form-item>

        <el-form-item label="时间" prop="time">
            <el-date-picker v-model="form.time" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd hh:mm:ss">
            </el-date-picker>
        </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="update">确定</el-button>
        <el-button @click="dialogVisible=false">取消</el-button>
    </span>

</el-dialog>

<%- include("../footer.ejs")-%>

<script>

    new Vue({
        router,
        el: '#app',
        data: {
            lock: false,
            tableData: [],
            currentPage1: 1,
            dialogVisible: false,
            form: { content: "", time: "", id: 0 },
            rules: {
                content: [
                    { required: true, message: '请输入公告', trigger: 'blur' },
                ],
                time: [
                    { required: true, message: '请输入时间', trigger: 'blur' },
                ],
            },
        },
        created: function () {
            this.handleCurrentChange(1)
        },
        methods: {
            update() {

                this.$refs["form"].validate((valid) => {
                    if (valid) {
                        if (!this.lock) {

                            var _this = this
                            _this.lock = true

                            if (_this.form.id > 0) {
                                fetch('/api/notice/' + _this.form.id, {
                                    method: 'POST',
                                    headers: { 'content-type': 'application/json; charset=utf-8' },
                                    body: JSON.stringify(_this.form),
                                }).then(response => response.json()).then(json => {
                                    _this.dialogVisible = false
                                    message(json, _this)
                                    _this.lock = false
                                });
                            } else {
                                fetch('/api/notice', {
                                    method: 'PUT',
                                    headers: { 'content-type': 'application/json; charset=utf-8' },
                                    body: JSON.stringify(_this.form),
                                }).then(response => response.json()).then(json => {

                                    _this.dialogVisible = false
                                    message(json, _this)
                                    _this.handleCurrentChange(1)
                                    _this.lock = false
                                });
                            }
                        }

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            handleClose(done) { },
            handleCreate() {

                this.dialogVisible = true
                this.form.content = ""
                this.form.time = ""
                this.form.id = null

            },
            handleEdit(row) {

                var _this = this
                _this.form = row

                fetch('/api/notice/' + row.id).then(response => response.json()).then(json => {

                    _this.dialogVisible = true
                    _this.form.content = json.content
                    _this.form.time = json.time

                });
            },
            handleDelete(id) {

                var _this = this
                this.$confirm('再次确认删除此条数据').then(_ => {
                    fetch('/api/notice/' + id, { method: 'DELETE' }).then(response => response.json()).then(json => {

                        message(json, _this)
                        _this.handleCurrentChange(_this.currentPage1)

                    });
                })
                    .catch(_ => { });
                // var _this = this


            },
            handleSizeChange(val) { },
            handleCurrentChange(val) {

                var _this = this
                fetch('/api/notices?page=' + val).then(response => response.json()).then(json => {
                    _this.tableData = json
                });
            }
        }
    })

</script>